<template>
  <div class="qustion">
    <div class="search">
      <van-search v-model="value" placeholder="请输入搜索关键词" />
    </div>
    <div class="tab">
      <tabBtnTag />
    </div>
    <div class="wrapItem">
      <div class="lise" v-for="i in 5" :key="i">
        <div class="lise-head">
          <div class="lise-head-user">
            <img src="@img/avatar.png" alt="" /> 司徒晚景 · 市场部总监
          </div>
          <div class="lise-head-time">2023-02-22 12:22</div>
        </div>
        <div class="lise-content">
          <div class="content-title">
            关于怎么提升公司公众号流量, 应提升那几方面呢?
          </div>
          <div class="content-img">
            <img src="@img/zsbg.png" alt="" />
          </div>
        </div>
        <div class="lise-head">
          <div class="lise-head-user dt">12人回答 · 34浏览</div>
          <div class="lise-head-time">
            <span class="toHd">去回答</span>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="posting">
      <img src="@/assets/images/posting.png" alt="" />
    </div> -->
    <div class="wdbtn">
        <postingDynamic></postingDynamic>
    </div>
  </div>
</template>

<script>
import tabBtnTag from "../components/tab-btn-tag.vue";
import postingDynamic from "../components/posting-dynamic.vue";
export default {
  components: {
    tabBtnTag,
    postingDynamic,
  },
  data() {
    return {
      value: "",
    };
  },
};
</script>

<style scoped lang="scss">
.qustion {
  .search {
    background: #ffffff;
    border-radius: 12px;
    margin: 0 16px;
    ::v-deep(.van-search) {
      padding: 0;
      height: 40px;
      input::placeholder {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #b9bdbd;
        line-height: 20px;
        text-align: left;
        font-style: normal;
      }
    }
  }
  .tab {
    padding: 0 16px;
  }
  .wrapItem {
    margin-top: 12px;
    padding: 0 16px;
    .lise {
      background: #ffffff;
      border-radius: 8px;
      padding: 12px 16px;
      margin-bottom: 12px;
      .lise-head {
        display: flex;
        justify-content: space-between;
        padding-bottom: 11px;
        .lise-head-user {
          flex: 1;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 12px;
          color: #272b2d;
          line-height: 17px;
          text-align: left;
          font-style: normal;
          img {
            width: 20px;
            height: 20px;
            margin-right: 3px;
            vertical-align: middle;
          }
        }
        .dt {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 12px;
          color: #676b6b;
          line-height: 17px;
          text-align: left;
          font-style: normal;
        }
        .lise-head-time {
          flex: 1;
          text-align: right;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 12px;
          color: #676b6b;
          line-height: 17px;
          font-style: normal;
          .toHd {
            border-radius: 16px;
            border: 1px solid #00c37d;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 12px;
            color: #00ad6f;
            line-height: 17px;
            text-align: center;
            font-style: normal;
            padding: 2px 12px;
            vertical-align: middle;
          }
        }
      }
      .lise-content {
        display: flex;
        padding-bottom: 12px;
        .content-img {
          width: 100px;
          height: 60px;
          border-radius: 4px;
          img {
            vertical-align: middle;
            width: 100%;
            height: 100%;
          }
        }
        .content-title {
          flex: 1;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 16px;
          color: #272b2d;
          line-height: 22px;
          text-align: left;
          font-style: normal;
        }
      }
    }
  }
  .posting {
    background: url("@img/posting_bg.png") -12px -12px no-repeat;
    height: 60px;
    background-size: 82px 84px;
    width: 60px;
    position: fixed;
    right: 10px;
    bottom: 100px;
    padding: 18px 17px 17px 18px;
  }
}
</style>
